<div v-bind:class="[componentId]">
    <cly-header>
		<template v-slot:header-top>
			<cly-back-link link="#/analytics/views" :title ="i18n('views.back-to-views')"></cly-back-link>
		</template>
        <template v-slot:header-left>
            <h2> {{i18n('views.table.edit-views')}}</h2>
        </template>
    </cly-header>
    <cly-main>
		<cly-confirm-dialog @cancel="closeDeleteForm" @confirm="submitDeleteForm" :before-close="closeDeleteForm" ref="deleteConfirmDialog" :visible.sync="showDeleteDialog" dialogType="danger" :saveButtonLabel="deleteDialogConfirmText" :cancelButtonLabel="i18n('common.no-dont-delete')" :title="deleteDialogTitle" >
			<template slot-scope="scope">
				{{deleteDialogText}}
			</template>
		</cly-confirm-dialog>
		<cly-section>
			<cly-datatable-n  :default-sort="{prop: 'view', order: 'ascending'}" :trackedFields="['display']" :data-source="remoteTableDataSource" ref="editViewsTable" @selection-change="handleSelectionChange" >
				<template v-slot:header-left>
					<el-button v-if="!isDeleteButtonDisabled && canUserDelete" ref="deleteManyButton" :disabled="isDeleteButtonDisabled"  type="danger" @click="deleteManyViews" >{{i18n('common.delete')}}</el-button>
				</template>
				<template v-slot="scope">
					<el-table-column width="65" type="selection"></el-table-column>
					<el-table-column sortable="custom" prop="view" :label="i18n('views.table.view')"></el-table-column>
					<el-table-column sortable="custom" prop="display" :label="i18n('views.display-name')">
						<template v-slot="rowScope">
						<el-input type="text" v-model="rowScope.row.editedDisplay" @input="function(e) {displayNameChanged(e,scope,rowScope);}" ></el-input>
						</template>
					</el-table-column>
				</template>
				<template v-slot:bottomline="scope">
					<cly-diff-helper :diff="scope.diff" @discard="scope.unpatch()" @save="updateManyViews" v-if="canUserUpdate" ></cly-diff-helper>
				</template>
			</cly-datatable-n>
		</cly-section>
    </cly-main>
</div>